<template>
	<view class="personalInfo pl15 bgWhite mt10  pb20">

		<view class="personalBox  ">
			<view class="justify-between align-center formitem">
				<view class="">
					头像
				</view>
				<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">获取微信头像</button>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					昵称 <text class="req">*</text>
				</view>
				<uv-input v-model="personaModel.realname" inputAlign="right" border="none" placeholder="请输入您的昵称">
				</uv-input>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					姓名 <text class="req">*</text>
				</view>
				<uv-input v-model="personaModel.realname" inputAlign="right" border="none" placeholder="请输入您的姓名">
				</uv-input>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					电话号码 <text class="req">*</text>
				</view>
				<uv-input v-model="personaModel.realname" inputAlign="right" border="none" placeholder="请输入您的联系方式">
				</uv-input>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					性别 <text class="req">*</text>
				</view>
				<view class="justify-end">
					<uv-radio-group v-model="personaModel.realname">
							<uv-radio	:customStyle="{marginLeft: '8px'}" 	label="男" 
								name="1">
							</uv-radio>
							<uv-radio	:customStyle="{marginLeft: '48px'}" 	label="女"
								name="2">
							</uv-radio>
						</uv-radio-group>
				</view>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					民族 <text class="req">*</text>
				</view>
				<uv-input v-model="personaModel.realname" inputAlign="right" border="none" placeholder="请输入您的民族">
				</uv-input>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					出生日期 <text class="req">*</text>
				</view>
				<view class="align-center" style="color: rgba(0,0,0,.4);">
					{{'请选择您的出生日期'}} <uv-icon name="arrow-right" size="14" color="rgba(0,0,0,.4)"></uv-icon>
				</view>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					地址 <text class="req">*</text>
				</view>
				<view class="align-center" style="color: rgba(0,0,0,.4);">
					{{'请选择您地址'}} <uv-icon name="arrow-right" size="14" color="rgba(0,0,0,.4)"></uv-icon>
				</view>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					学历 <text class="req">*</text>
				</view>
				<view class="align-center" style="color: rgba(0,0,0,.4);">
					{{'请选择您的最高学历'}} <uv-icon name="arrow-right" size="14" color="rgba(0,0,0,.4)"></uv-icon>
				</view>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					婚姻状况 <text class="req">*</text>
				</view>
				<view class="justify-end">
					<uv-radio-group v-model="personaModel.realname">
							<uv-radio	:customStyle="{marginLeft: '8px'}" 	label="未婚" 
								name="1">
							</uv-radio>
							<uv-radio	:customStyle="{marginLeft: '48px'}" 	label="已婚"
								name="2">
							</uv-radio>
							<uv-radio	:customStyle="{marginLeft: '48px'}" 	label="离异"
								name="3">
							</uv-radio>
						</uv-radio-group>
				</view>
			</view>
			<view class="justify-between align-center formitem">
				<view class="">
					我的需求 <text class="req">*</text>
				</view>
				<view class="align-center" style="color: rgba(0,0,0,.4);">
					{{'请选择您的出国需求'}} <uv-icon name="arrow-right" size="14" color="rgba(0,0,0,.4)"></uv-icon>
				</view>
			</view>
		</view>

		<view class="save_btn" @click="save">
			保存
		</view>
		<!--  <uv-checkbox-group class="mt18" v-model="checkboxValue" shape="circle">
            			<uv-checkbox name="1"
            				activeColor="#2CC6A1"
            			>
                        <view class="" style="color: #979797;" slot="default">
                            我已阅读并同意 <text @click.stop="toIndex(1)" style="color: #2CC6A1;">《用户服务协议》</text >和 <text @click.stop="toIndex(2)" style="color: #2CC6A1;"> 隐私政策</text>
                        </view>
                        
                        </uv-checkbox>
            		</uv-checkbox-group> -->

		<uv-popup ref="popup" @change="change" mode="bottom">
			<view style="height: 70vh;overflow: scroll;" class="posRelative">
				<view class="align-center justify-between ft18 plr16  bgWhite w100" style="height: 114rpx;z-index: 99;">
					<view class="" @click="close()">
						取消
					</view>
					<view class="flex1 align-center justify-end">
						<view class="" @click="clear">
							清空 |
						</view>

						<view class="ml2" @click="confirm" style="color: #2388F4;">
							确定
						</view>
					</view>
				</view>

				<view class="" style="height:  calc( 70vh - 210rpx);overflow: scroll;">
					<uv-collapse>
						<uv-collapse-item v-for="(i,n) in Category" :key="n" :title="i.title" :name="item.id">
							<uv-checkbox-group v-model="i.checked" :borderBottom="true" iconPlacement="right"
								placement="column">
								<uv-checkbox :customStyle="{marginBottom: '8px',height:'92rpx',fontSize:'32rpx'}"
									v-for="(item, index) in i.children" :key="index" :label="item.title"
									:name="item.id"></uv-checkbox>
							</uv-checkbox-group>
						</uv-collapse-item>
					</uv-collapse>
				</view>

				<view class="save_btn" @click="confirm">
					提交
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				personaModel: {

					career: "",
					realname: "",
					company: "",
					id: "",
					career: "",
					business_type: "",
					company_profile: "",
					company_size: "",
					layout_city: "",
					requirements: "",
					classid: "",
					require_tags: "",
					// userId:uni.getStorageSync('userId')
				},
				personalRules: {},
				Category: [],
				checkboxValue: [],
				labelStyle: {
					padding: '20rpx 0'
				},
				cateList: [],
				tagsList: [{
						id: '1',
						title: '行业学习交流'
					},
					{
						id: '2',
						title: '对接客户渠道'
					},
					{
						id: '3',
						title: '找产品供应链'
					},
					{
						id: '4',
						title: '获取数据报告'
					},
					{
						id: '5',
						title: '增加品牌曝光',
					},
					{
						id: '6',
						title: '专业人才招聘'
					},
					{
						id: '7',
						title: '对接投融资'
					},

					{
						id: '8',
						title: '其他需求'
					},
				],
				require_tags: []
			};
		},
		onReady() {
			this.getCategory()
		},
		onLoad() {

			if (!uni.getStorageSync('userId')) {
				uni.switchTab({
					url: '/pages/login/login'
				})
			} else {
				this.getcompanyMain()

			}


		},
		mounted() {


		},
		methods: {
			async chooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(avatarUrl)
				const result = await this.$api.uploadImg({
					filePath: avatarUrl
				})
				console.log(result)
				this.form.avatar = operate.api + 'storage/' + result.filename
			},
			getcompanyMain() {
				this.$api.getCompanyProfile({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					console.log(res)
					this.personaModel = res.data
					if (res.data.require_tags) this.require_tags = res.data.require_tags.split(',')
				})
			},
			change() {

			},
			clear() {

				this.Category = this.Category.map(item => {
					item.checked = []
					return item
				})
				this.cateList = []
			},
			close() {
				this.$refs.popup.close()
			},
			confirm() {
				this.cateList = []
				this.Category.map(item => {
					if (item.checked.length) {
						item.checked.map(i => {
							let data = item.children.find(item => item.id == i)
							console.log(data)
							this.cateList.push(data)
						})
					}
				})

				this.$refs.popup.close()

			},
			getCategory() {
				this.$api.getCategory().then(res => {
					this.Category = res.data.map(item => {
						return {
							...item,
							...{
								checked: []
							}
						}
					})
					if (this.personaModel.classid) {
						this.Category.map(item => {
							console.log(item)

							if (item.id == this.personaModel.classid) {

								item.children.map(i => {
									if (this.personaModel.smallclassid.includes(i.id)) {
										item.checked.push(i.id)
										this.cateList.push(i)
									}
								})

							}
						})
					}
				})

			},
			close() {
				this.$refs.popup.close()
			},
			showPop() {
				this.$refs.popup.open()
			},
			async getUserInfo() {
				const {
					data
				} = await this.$api.userinfo()
				this.area = data.areaname
				this.personaModel = data
			},

			toIndex() {

			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			async save() {
				let vm = this

				vm.personaModel.require_tags = vm.require_tags.join(',')


				vm.$api.companySave(vm.personaModel).then(res => {
					if (res.code == 200) {
						vm.$utils.msg('申请成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					} else {
						vm.$utils.msg(res.msg)
					}
				})



				// if(!this.checkboxValue.length)  return this.$utils.msg('请阅读并勾选隐私协议')

			},

			getPhoneNumber(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		margin-top: 52rpx;
		margin-bottom: 40rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #000000;
		line-height: 36rpx;

	}

	.personalInfo {


		position: relative;

		.personalBox {}

		.save_btn {
			width: 686rpx;
			height: 96rpx;
			background: #0368FF;
			border-radius:12rpx;
			margin: 32rpx auto;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 96rpx;
		}

	}

	button {
		color: #303133;
		font-size: 28rpx;
		text-align: left;
	}

	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.tag {
		background: #0368FF;
		color: #fff;
		opacity: .7;
		padding: 4rpx 10rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		margin: 5rpx;
	}

	.formitem {
		height: 112rpx;
		// padding: 0 32rpx;
		padding-right: 32rpx;
		font-size: 32rpx;
		color: var(--text-icon-font-gy-190, rgba(0, 0, 0, 0.90));

		border-bottom: 1rpx solid var(--Gray-Gray3, #E7E7E7);
		line-height: 48rpx;

		/* 150% */
		.chooseAvatar {
			color: #228CFC;
		}
		.req{
			color: #D54941;
			display: inline-block;
			margin-left: 8rpx;
		}
	}
</style>